import React, { Component } from 'react';
import { Table, Input, Select, Button, Progress } from 'antd';
import styles from './index.less';

const { Option } = Select;

export default class TestTable extends Component {
  state = {
    data: [],
    loading: false,
    pagination: {
      current: 1,
      pageSize: 10,
      total: 0,
    },
    filters: {
      taskName: '',
      testName: '',
      status: 'all',
    },
  };

  columns = [
    {
      title: '任务ID',
      dataIndex: 'taskId',
      width: 100,
    },
    {
      title: '任务名称',
      dataIndex: 'taskName',
      width: 180,
    },
    {
      title: '流水线名称',
      dataIndex: 'pipelineName',
      width: 120,
    },
    {
      title: '前置名称',
      dataIndex: 'preName',
      width: 120,
    },
    {
      title: '组件名称',
      dataIndex: 'componentName',
      width: 120,
    },
    {
      title: '组件状态',
      dataIndex: 'componentStatus',
      width: 120,
      render: status => (
        <span style={{ color: status === '运行' ? '#1890ff' : '#000' }}>
          {status}
        </span>
      ),
    },
    {
      title: '组件状态',
      dataIndex: 'progress',
      width: 100,
      render: progress => <Progress percent={progress} size="small" />,
    },
    {
      title: '重试次数',
      dataIndex: 'retryCount',
      width: 100,
      align: 'center',
    },
    {
      title: '组件运行进度条',
      dataIndex: 'progressPercent',
      width: 120,
      render: percent => <span>{percent}%</span>,
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_, record) => (
        <Button type="link" onClick={() => this.handleDetail(record)}>
          {record.actionText || '流程'}
        </Button>
      ),
    },
  ];

  componentDidMount() {
    this.fetchData();
  }

  fetchData = (params = {}) => {
    this.setState({ loading: true });
    // Mock data - replace with actual API call
    setTimeout(() => {
      const mockData = Array(10)
        .fill(null)
        .map((_, index) => ({
          taskId: `${23000 + index}`,
          taskName: `test_${index}`,
          pipelineName: `test V${Math.floor(Math.random() * 2) + 1}`,
          preName: '流程引擎',
          componentName: '单测流程',
          componentStatus: '运行',
          progress: '1d14h45m59s',
          retryCount: Math.floor(Math.random() * 5) + 1,
          progressPercent: 32,
          actionText: ['流程', '一般测试', '开发流程', '集成流程'][
            Math.floor(Math.random() * 4)
          ],
        }));

      this.setState({
        loading: false,
        data: mockData,
        pagination: {
          ...this.state.pagination,
          total: 100,
        },
      });
    }, 500);
  };

  handleTableChange = (pagination, filters, sorter) => {
    this.setState({
      pagination: {
        ...this.state.pagination,
        current: pagination.current,
      },
    });
    this.fetchData({
      pageSize: pagination.pageSize,
      current: pagination.current,
      ...filters,
    });
  };

  handleSearch = () => {
    const { pagination } = this.state;
    this.setState({
      pagination: {
        ...pagination,
        current: 1,
      },
    });
    this.fetchData();
  };

  handleDetail = record => {
    console.log('View detail:', record);
  };

  render() {
    const { data, loading, pagination, filters } = this.state;

    return (
      <div className={styles.tableContainer}>
        <div className={styles.filterSection}>
          <div className={styles.filterItem}>
            <span>任务名称：</span>
            <Input
              placeholder="请输入任务名称"
              value={filters.taskName}
              onChange={e =>
                this.setState({
                  filters: { ...filters, taskName: e.target.value },
                })
              }
              style={{ width: 200 }}
            />
          </div>
          <div className={styles.filterItem}>
            <span>组件名称：</span>
            <Input
              placeholder="请输入组件名称"
              value={filters.testName}
              onChange={e =>
                this.setState({
                  filters: { ...filters, testName: e.target.value },
                })
              }
              style={{ width: 200 }}
            />
          </div>
          <div className={styles.filterItem}>
            <span>组件状态：</span>
            <Select
              value={filters.status}
              onChange={value =>
                this.setState({ filters: { ...filters, status: value } })
              }
              style={{ width: 120 }}
            >
              <Option value="all">全部</Option>
              <Option value="running">运行</Option>
              <Option value="completed">已完成</Option>
              <Option value="failed">失败</Option>
            </Select>
          </div>
          <Button type="primary" onClick={this.handleSearch}>
            查询
          </Button>
          <Button style={{ marginLeft: 8 }}>重置</Button>
        </div>
        <Table
          columns={this.columns}
          dataSource={data}
          pagination={pagination}
          loading={loading}
          onChange={this.handleTableChange}
          rowKey="taskId"
          scroll={{ x: 1500 }}
        />
      </div>
    );
  }
}
